<template>
    <transition name='fade'>
        <div class="component-image-view" v-show='show' ref='box'>
            <modal 
                :show='true'
                @close='emitClose'
                content-close
                cancleText='' 
                confirmText=''
                :width='defaultWidthStr'
                :height='defaultWidthStr'
                :deleteButton='deleteButton' 
                @delete='emitDelete'>
                <div class='component-image-view__content'>
                    <img :src="url" :style='imgObj'>
                </div>
            </modal>
            <div class="component-image-options">
                <div class="component-image-option" @click='openUrl'><i class='iconfont icon-chakandatu'></i>查看大图</div>
                <div class="component-image-option" @click='rotateLeft'><i class='iconfont icon-xiangzuoxuanzhuan'></i>向左旋转</div>
                <div class="component-image-option" @click='rotateRight'><i class='iconfont icon-xiangyouxuanzhuan'></i>向右旋转</div>
                <div class="component-image-option" @click='emitClose'><i class='iconfont icon-close-pure'></i>关闭</div>
            </div>
        </div>
    </transition>
</template>

<script>
    import modal from './Modal.vue'

    export default {
        components:{ modal },
        props:{
            fixed:{
                type: Boolean,
                default:false
            },
            url:{
                type: String,
                default: false,
                required: true,
            },
            deleteButton:{
                type: Boolean,
                default:false
            },
            height:{
                type: String,
                default:'80%'
            },
            maxHeight:{
                type: String,
                default:'90%'
            },
            show:{
                type: Boolean,
                required: true,
            }
        },
        data() {
            return {
                defaultWidthStr:document.body.clientHeight * .8 + 'px',
                defaultWidth:document.body.clientHeight * .8,
                imgWidth:'',
                imgHeight:'',
                rotateDeg:0,
                sym:'',
                scale:'',
                isAppendToBody:false,
                imgRotate:false
            }
        },
        computed:{
            styleObj(){
                let object = {}
                console.log(`rotate(${this.rotateDeg})deg`)
                if(this.imgRotate){
                    object.height = `${this.imgWidth}px`
                }
                else{
                    object.height = `${this.imgHeight}px`
                }
                return object
            },
            imgObj(){
                let object = {}

                if(this.imgRotate){
                    object.transform = `rotate(${this.rotateDeg}deg)`
                    object.width = `${this.imgWidth}px`
                    object.height = `${this.imgHeight}px`
                }
                else{
                    object.transform = `rotate(${this.rotateDeg}deg)`
                    object.width = `${this.imgWidth}px`
                    object.height = `${this.imgHeight}px`
                }
                return object
            },
        },
        methods:{
            emitClose(){
                this.$emit('close')
            },
            imgLoaded(e){
                console.log(e)
            },
            openUrl(){
                window.open(this.url)
            },
            rotateLeft(){
                if(this.rotateDeg == -270){
                    this.rotateDeg = 0
                }
                else{
                    this.rotateDeg = this.rotateDeg - 90
                }
                this.imgRotate = !this.imgRotate
            },
            rotateRight(){
                if(this.rotateDeg == 270){
                    this.rotateDeg = 0
                }
                else{
                    this.rotateDeg = this.rotateDeg + 90
                }
                this.imgRotate = !this.imgRotate
            },
            emitDelete(){
                this.$emit('delete')
            },
            contrast(width,height){
                if(width > height){
                    let useWidth = width > this.defaultWidth ? this.defaultWidth : width
                    this.sym = 1
                    this.scale = width / height
                    this.imgWidth = useWidth
                    this.imgHeight = useWidth / this.scale
                }
                else{
                    let useHeight = height > this.defaultWidth ? this.defaultWidth : height
                    this.sym = -1
                    this.scale = height / width
                    this.imgHeight = useHeight
                    this.imgWidth = useHeight / this.scale
                }
            },
            init(){
                let img = new Image()
                img.src = this.url
                if (img.complete) {     
                    this.contrast(img.width,img.height)
                }
                else{
                    img.onload = ()=> {   
                        this.contrast(img.width,img.height)
                    }
                    img.onerror = ()=> {   

                    }
                }
            },
            appendModalToBody(){
                if(this.fixed){
                    if(!this.isAppendToBody) this.isAppendToBody = true
                    document.body.appendChild(this.$refs.box)
                }
            }
        },
        created(){
            this.init()
        },
        mounted(){
            this.$nextTick(()=>{
                this.appendModalToBody()
            })
        },
        beforeDestroy(){
            if(this.isAppendToBody) document.body.removeChild(this.$refs.box)
        },
        watch: {
            // 'show'(newVal,oldVal){
            //     alert('show')
            //     if(newVal == true){
            //         this.appendModalToBody()
            //     }
            // },
            'url'(newVal,oldVal){
                if(newVal == oldVal) return
                else{
                    this.init()
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .component-image-view{
        position: fixed;
        z-index: 3000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        transition: all 200ms ease;
        .component-image-options{
            display: flex;
            justify-content: center;
            z-index:999;
            color:#fff;
            font-size: 15px;
            position: absolute;
            bottom:3%;
            left:50%;
            transform:translate(-50%,0);
            .iconfont{
                padding-right: 5px;
            }
        }
        .component-image-option{
            cursor:pointer;
            margin: 0 10px;
            padding: 15px 0;
            &:active{
                color:$green;
            }
        }
        .component-modal__container{
            background-color: transparent;
            box-shadow:none;
        }
        .component-modal__main{
            padding: 0;
            text-align: center;
            width: 100%;
            height: 100%;
            overflow:auto;
            -webkit-overflow-scrolling: touch;
        }
        .component-modal__container{
            z-index:3000!important;
        }
    }
    .component-image-view__content{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow:auto;
        -webkit-overflow-scrolling: touch;
        // box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.12), 0 16px 16px 0 rgba(0, 0, 0, 0.12);
        img{
            // position: absolute;
            // top:50%;
            // left:50%;
            // transform:translate(-50%, -50%);
            transition:transform ease 250ms;
            max-width: 100%;
        }
    }
</style>


